<!DOCTYPE html>
<html>
    <head>
        <title>indexhtml</title>
        
         <meta name="viewport"  content="width=device-width, initial-scale=1.0" />
         
    	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<meta http-equiv="pragma" content="no-cache">
		
		<meta http-equiv="cache-control" content="no-cache">
		<meta http-equiv="expires" content="0">    
		
		<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
		<meta http-equiv="description" content="This is my page">
		
        <link type="text/css" rel="stylesheet" media="screen" href="css/test.css">
		<script type="text/javascript" src="js/jquery-1.5.1.js"></script>
		
		<script type="text/javascript" src="js/webview.js"></script>
		<script type="text/javascript" src="js/hotcompilationsTestJson.js">
		
		</script>
		
        <style type="text/css">
		#topDiv div{
			position: absolute;
		}
		#middleDiv div{
			position: absolute;
		}
		
		 .nav{
			position: absolute;
			font-family:Microsoft YaHei;
			color: white;
			font-size: 30px;
			width:150px;
			height: 50px;
			top:50px
		}
		
		
		
		.div-inline div{
			display:inline-block;
		}
		
		.div-inline1{
			left:20px;
		}
		.div-inline1>img{
			width:366px;
		}
		
		
		.div-inline2{
			left:396px;
		}
		
		.div-inline2>img{
			width:213px;
		}
		
		
		.div-inline3{
			left:20px;
			top:242px;
		}
		
		.div-inline3>img{
			width:589px;
		}
		.div-inline4{
			left:619px;
		}
		
		.div-inline4>img{
			width:405px;
		}
		
		
		.div-inline5{
			left:1034px;
		}
		
		.div-inline5>img{
			width:366px;
		}
		
		.div-inline6{
			top:242px;
			left:1034px;
		}
		
		.div-inline6>img{
			width:366px;
		}
		
		.navFocus{
			position:absolute;
			width:213px; 
			
			height:58px; 
			left: -9px; 
			
			background:url(images/hotcompilations/focus.png) no-repeat; 
			display:none; 
			
			top:0px;
		}

		</style>
		<script type="text/javascript" src="js/mylib.js"></script>
		<script type="text/javascript" src="js/hotcompilations.js"></script>
		<script type="text/javascript">
		
		var total=0;
		var dataJson = {};
		var listData;	
		
		var totaltop=0
		var datatopJson = {};
		var listtopData;	
		
		
		 var tabsDivIndex=0;//上部分div初始下标
		var name;
		function addtitle()
		
		{
		for(var i=0; i<totaltop; i++)
					{
						var div = $("<div>");
						div.attr("class","nav");	
						div.attr("style","left:"+(50+i*180)+"px");
						div.append(listtopData[i].name);
						$("#topDiv").append(div);
						
						
						var div1 = $("<div>");
						div1.attr("class","navFocus common");	
						div1.attr("style","left:"+(0+i*180)+"px;top:50px");
						$("#topDiv").append(div1);
						
						
						
					} 
		} 
		
		function gamel(x)
		{
		
		
			$("#middleDiv").empty();
			switch(x)
			{
			case 0:
				dataJson = compilationsTest.testJSON;
				listData = dataJson.index_list.index;
				total = listData.length;
			  break;
			  
			case 1:
				dataJson = compilationsTest.testJSON2;
				listData = dataJson.index_list.index;
				total = listData.length;
				 break;
				 
			case 2:
				
				dataJson = compilationsTest.testJSON3;
				listData = dataJson.index_list.index;
				total = listData.length;
			  	break;
			  	
			case 3:
				dataJson = compilationsTest.testJSON4;
				listData = dataJson.index_list.index;
				total = listData.length;
			  break;
			 case 4:
				dataJson = compilationsTest.testJSON5;
				listData = dataJson.index_list.index;
				total = listData.length;
			  break;
			  
			  	case 5:
				dataJson = compilationsTest.testJSON6;
				listData = dataJson.index_list.index;
				total = listData.length;
			  break;
			  	case 6:
				dataJson = compilationsTest.testJSON7;
				listData = dataJson.index_list.index;
				total = listData.length;
			  break;

			default:
			}
			for(var i=0; i<10; i++)
					{
						var div = $("<div>");
						var imgs;
						var img;
						imgs = eval("'" + listData[i].img + "'");
						
							console.log("111111111limgs:"+imgs);
						
						if(i==0)
						{
						
							div.attr("class","div-inline1");
							 imgs = eval("'" + listData[i].img + "'");
							 img = $("<img>");
							img.attr({"class":"img2","src":imgs});
							
						}
						else if(i==1)
						{
						
							div.attr("class","div-inline2");
							var imgs = eval("'" + listData[i].img + "'");
							var img = $("<img>");
							img.attr({"class":"img2","src":imgs});	
							div.append(img);									
						}
						else if(i==2)
						{
							div.attr("class","div-inline3");
							var imgs = eval("'" + listData[i].img + "'");
							var img = $("<img>");
							img.attr({"class":"img2","src":imgs});										
						}
						else if(i==3)
						{
							div.attr("class","div-inline4");
							var imgs = eval("'" + listData[i].img + "'");
							var img = $("<img>");
							img.attr({"class":"img2","src":imgs});
						}
						
						else if(i==4)
						{
							div.attr("class","div-inline5");
							var imgs = eval("'" + listData[i].img + "'");
							var img = $("<img>");
							img.attr({"class":"img2","src":imgs});									
						}
						else if(i==5)
						{
							div.attr("class","div-inline6");
							var imgs = eval("'" + listData[i].img + "'");
							var img = $("<img>");
							img.attr({"class":"img2","src":imgs});		
						}
						else
						{
							if(i%2==0)
							{
								div.attr("style","left:"+(1034+Math.ceil((i-5)/2)*376)+"px");
		 						var imgs = eval("'" + listData[i].img + "'");
								var img = $("<img>");
								img.attr({"class":"img2","src":imgs});	
							}
							else
							{
								div.attr("style","left:"+(1034+Math.ceil((i-5)/2)*376)+"px;;top:242px");
		 						var imgs = eval("'" + listData[i].img + "'");
								var img = $("<img>");
								img.attr({"class":"img2","src":imgs});
							}
						} 

						div.append(img);
						$("#middleDiv").append(div);

					} 
		} 
		$(document).ready(function(){
		
			if(GetQueryString("focus")!=null)
			{
			console.log("111111111111GetQueryString:"+GetQueryString("focus"));
			
			console.log("111111111111tabsDivIndex"+tabsDivIndex);
				tabsDivIndex= parseInt(GetQueryString("focus")); //获取传到本页面的参数;
							console.log("111111111111tabsDivIndex:"+tabsDivIndex);
				
			}
			
		
			dataJson = compilationsTest.testJSON;
			listData = dataJson.index_list.index;
			total = listData.length;
			datatopJson = compilationsTest.testtopJSON;
			listtopData = datatopJson.index_list.index;
			name=listtopData.name;
			totaltop = listtopData.length;
			addtitle();
			gamel();
			}
		)
		</script>

  </head>
  <body>
      <img style="width:1270x;height:720px;position:absolute;left:0px;top:0px" src="images/bg1.jpg"></img> 
   	  <img style="position:absolute; left:100px;top:20px"src="images/hotcompilations/logo.png"></img> 
   	  
   	   <img style="position:absolute; left:130px;top:62px;width:1107px" src="images/hotcompilations/xian.png"></img> 
    	<font  size="5" style="position:absolute; left:130px;top:20px" color="#FFFFFF">热门游戏</font> 
    	
 		
 		
 	<div id='d1' style='top:0px; left:130px;position:relative;height:100px;width:1107px;overflow:hidden;'>
   	  <div id="topDiv" style="left:0px;top:00px width:1270px;position: absolute;" class="subMenuItem1"> 

      </div>
      </div>
   	 <div id='d2' style='top:40px; position:relative;height:483px;width:1270px;overflow:hidden;'>
   	 
  	 <div id="middleDiv" style="left:80px; width:1270px;position: absolute;" class="subMenuItem1"> 
  		
     </div>
   </div> 
       	<img id='more' style="position:absolute; left:1210px;top:50px"src="images/shouyou/more.png"></img>    
  	
  </body>
  <script type="text/javascript">
  

	var menu=null;//0-菜单对象 
	var flag=true;   
	var _this=this;
    window.onload=function(){ 
       menu=new Menu(); 
       menu.ok=function(){ 
        keyboard();
       }
	</script>
</html>
